<template>
    <div class="icons-container">
        <el-tabs type="border-card">
            <el-tab-pane label="Icons">
                <div class="grid">
                    <div v-for="item of svg_icons" :key="item" @click="handleClipboard(generateIconCode(item), $event)">
                        <el-tooltip effect="dark" :content="generateIconCode(item)" placement="top">
                            <div class="icon-item">
                                <svg-icon :icon-class="item" />
                                <span>{{ item }}</span>
                            </div>
                        </el-tooltip>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="Element-UI Icons">
                <div class="grid">
                    <div v-for="(icon, name) of icons" :key="name"
                        @click="handleClipboard(generateElementIconCode(name), $event)">
                        <el-tooltip effect="dark" :content="generateElementIconCode(name)" placement="top">
                            <div class="icon-item">
                                <el-icon :size="20">
                                    <component :is="icon" />
                                </el-icon>
                                <span>{{ name }}</span>
                            </div>
                        </el-tooltip>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from "element-plus"
import SvgIcon from "@/components/SvgIcon/index.vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

defineOptions({
    // eslint-disable-next-line
    name: "Icons",
    inheritAttrs: false,
});
const svg_icons: string[] = [
    "api",
    "cascader",
    "client",
    "close",
    "close_all",
    "close_left",
    "close_other",
    "close_right",
    "dict",
    "document",
    "download",
    "drag",
    "edit",
    "exit-fullscreen",
    "eye-open",
    "eye",
    "fullscreen",
    "github",
    "homepage",
    "language",
    "link",
    "menu",
    "message",
    "money",
    "monitor",
    "order",
    "password",
    "peoples",
    "perm",
    "publish",
    "role",
    "security",
    "size",
    "skill",
    "system",
    "tree",
    "user",
    "uv",
    "verify-code",
];
const icons = ref(ElementPlusIconsVue);

const { copy } = useClipboard();

function generateIconCode(symbol: any) {
    return `<svg-icon icon-class="${symbol}" />`;
}

function generateElementIconCode(symbol: any) {
    return `<el-icon><${symbol} /></el-icon>`;
}

function handleClipboard(text: any, event: any) {
    // clipboard(text, event);
    copy(text)
        .then(() => {
            ElMessage.success("Copy successfully");
        })
        .catch(() => {
            ElMessage.warning("Copy failed");
        });
}
</script>

<style lang="scss" scoped>
.icons-container {
    margin: 10px 20px 0;
    overflow: hidden;

    .grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .icon-item {
        float: left;
        width: 100px;
        height: 85px;
        margin: 20px;
        font-size: 30px;
        color: var(--el-text-color-regular);
        text-align: center;
        cursor: pointer;
    }

    span {
        display: block;
        margin-top: 10px;
        font-size: 16px;
    }

    .disabled {
        pointer-events: none;
    }
}
</style>
